import React, { PureComponent } from 'react';

import moment from 'moment';
import { DatePicker, Form } from 'antd';
// import { get as _get } from 'object-path';
// import { stat } from 'fs';
import styles from './dateSelection.less';

@Form.create()
class DateSelection extends PureComponent {
    state = {
        mode: this.props.mode,
        times: this.props.value,
        defaultOption: [
            {
                en: 'year',
                cn: '今年'
            },
            {
                en: 'quarter',
                cn: '本季度'
            },
            {
                en: 'month',
                cn: '本月'
            },
            {
                en: 'week',
                cn: '本周'
            }
        ],
        dateOption: this.props.dateOption
    };

    componentDidMount() {
        this.changeTime(this.state.mode);
    }

    componentWillReceiveProps(nextProps) {
        // 任何时候props.mode.
        if (nextProps.mode !== this.props.mode) {
            this.setState({
                mode: nextProps.mode,
                dateOption: nextProps.dateOption
            });
        }
    }

    // ui日期切换选择
    changeTime = type => {
        if (type === 'year') {
            this.getFirstAndLastYear();
        } else if (type === 'quarter') {
            this.getFirstAndLastquarter();
        } else if (type === 'month') {
            this.getFirstAndLastMonthDay();
        } else if (type === 'week') {
            this.getFirstAndLasWeek();
        }
        this.setState({ mode: type });
    };

    // 获取本年开始时间和结束时间
    getFirstAndLastYear = () => {
        const arr = [
            moment(
                moment()
                    .year(moment().year())
                    .startOf('year')
                    .format('YYYY-MM-DD')
            ),
            moment(
                moment()
                    .year(moment().year())
                    .endOf('year')
                    .format('YYYY-MM-DD')
            )
        ];
        this.props.onChange(arr);
        this.setState({
            times: arr
        });
    };

    // 获取季度第一天和最后一天
    getFirstAndLastquarter = () => {
        const arr = [
            moment(
                moment()
                    .quarter(moment().quarter())
                    .startOf('quarter')
                    .format('YYYY-MM-DD')
            ),
            moment(
                moment()
                    .quarter(moment().quarter())
                    .endOf('quarter')
                    .format('YYYY-MM-DD')
            )
        ];
        this.props.onChange(arr);
        this.setState({
            times: arr
        });
    };

    // 获取当月最后一天日期和第一天
    getFirstAndLastMonthDay = () => {
        const arr = [
            moment(
                moment()
                    .month(moment().month())
                    .startOf('month')
                    .format('YYYY-MM-DD')
            ),
            moment(
                moment()
                    .month(moment().month())
                    .endOf('month')
                    .format('YYYY-MM-DD')
            )
        ];
        this.props.onChange(arr);
        this.setState({
            times: arr
        });
    };

    // 获取本周开始时间和结束时间
    getFirstAndLasWeek = () => {
        const arr = [
            moment(
                moment()
                    .week(moment().week())
                    .startOf('week')
                    .format('YYYY-MM-DD')
            ),
            moment(
                moment()
                    .week(moment().week())
                    .endOf('week')
                    .format('YYYY-MM-DD')
            )
        ];
        this.props.onChange(arr);
        this.setState({
            times: arr
        });
    };

    handleChange = data => {
        this.setState({
            times: data,
            mode: ''
        });
        this.props.onChange(data);
    };

    initTabl = () => {
        const { mode, dateOption, defaultOption } = this.state;
        const day = dateOption || defaultOption;

        return (
            <ul>
                {day.map(v => (
                    <li
                        key={v.en}
                        className={mode === v.en ? styles.active : ''}
                        onClick={() => this.changeTime(v.en)}
                    >
                        {v.cn}
                    </li>
                ))}
            </ul>
        );
    };

    render() {
        const { times } = this.state;
        const { RangePicker } = DatePicker;
        return (
            <div className={styles.uiDataPick}>
                {this.initTabl()}
                <RangePicker
                    allowClear={false}
                    value={times}
                    onChange={this.handleChange}
                />
            </div>
        );
    }
}
export default DateSelection;
